<!--  frame 模板 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>创建订单</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css" />

	<style>
		body {
			/*background-color:#F8F8F8;*/
		}

		.Addr {
			position: relative;
			min-height: 1rem;
			padding: 0.30rem 0.30rem 0.70rem;
			background: linear-gradient(0deg, rgba(253, 27, 66, 1) 0%, rgba(255, 80, 45, 1) 100%);
			color: #fff;
		}

		.Addr::after {
			position: absolute;
			right: 0.30rem;
			top: 40%;
			display: block;
			margin-top: -0.15rem;
			font: 0.30rem/1em "iconfont";
			content: "\e644";
		}

		.Addr .detail {
			padding-right: 0.40rem;
			border: 0px solid #fff;
		}

		.Addr .detail .name {
			display: block;
			margin: 0 0 0.15rem;
			font: 800 0.32rem/1.5em "";
		}

		.Addr .detail .addr {
			display: block;
			font: 0.28rem/1.5em "";
		}

		.Addr .empty {
			font: 800 0.32rem/1rem "";
		}

		.product_box {
			margin-top: -30px;
			margin-bottom: 1.2rem;
		}

		.product:nth-child(1) {
			border-radius: 20px 20px 0px 0px;
		}

		.product {
			position: relative;
			z-index: 50;
			margin-top: 0.20rem;
			padding: 0.30rem 0.30rem 0;
			background: #fff;
		}

		.product img {
			display: block;
			width: 1.20rem;
			height: 1.20rem;
			border-radius: 0.10rem;
		}

		.product .info {
			display: flex;
			margin-bottom: 0.30rem;
		}

		.product .info .section {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.product .info .section.s1 {
			width: 4.70rem;
			padding: 0.20rem;
		}

		.product .info .section.s2 {
			padding: 0.20rem 0;
		}

		.product .info span {
			display: block;
		}

		.product .info span.name {
			font: 0.28rem/1.5em "";
			color: #666;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.product .info span.sku {
			font: 0.24rem/1em "";
			color: #999;
			margin-top: 0.16rem;
		}

		.product .info span.price {
			font: 0.28rem/1em "";
			color: #FF502D;
		}

		.product .info span.num {
			font: 0.24rem/1em "";
			color: #999;
			text-align: right;
			margin-top: 0.16rem;
		}

		.product .info2 {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 0.35rem 0;
			border-top: 0.01rem solid #EEEEEE;
		}

		.product .info2 .name {
			font: 0.28rem/1em "";
			color: #333;
		}

		.product .info2 .value {
			font: 0.28rem/1em "";
			color: #666;
		}

		.product .info2 .price {
			color: #FF502D;
		}

		.product .info2.money {
			padding-bottom: 0.70rem;
		}

		.product .info2 .tips {
			position: absolute;
			right: 0;
			bottom: 0.30rem;
			font: 0.24rem/1em "";
			color: #999;
		}

		.coupon {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-top: 0.20rem;
			padding: 0.30rem;
			background: #fff;
			border-top: 0.01rem solid #EEEEEE;
		}

		.coupon::after {
			position: absolute;
			right: 0.30rem;
			top: 50%;
			display: block;
			margin-top: -0.10rem;
			font: 0.20rem/1em "iconfont";
			content: "\e644";
			color: #999;
		}

		.coupon .name {
			font: 0.28rem/1em "";
			color: #333;
		}

		.coupon .value {
			padding-right: 0.40rem;
			font: 0.28rem/1em "";
			color: #999;
		}

		.phone {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0.20rem 0;
			padding: 0.25rem 0.35rem;
			background: #fff;
			margin-bottom: 1.2rem;
			border-top: 0.01rem solid #EEEEEE;
		}

		.phone .name {
			font: 0.28rem/0.44rem "";
			color: #333;
		}

		.phone .value {
			height: 0.28rem;
			font: 0.28rem/1em "";
			padding-top: 0.05rem;
			color: #666;
			text-align: right;
			border: 0px solid #f00;
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			height: 1rem;
			background: #fff;
			border: 0px solid #f00;
		}

		.footer .price {
			padding: 0 0.50rem;
			font: 0.28rem/1rem "";
			color: #999;
		}

		.footer .price span {
			font: 800 0.34rem/1rem "";
			color: #FF502D;
		}

		.footer .btn {
			position: absolute;
			right: 0.30rem;
			top: 0.15rem;
			width: 3.00rem;
			height: 0.80rem;
			line-height: 0.80rem;
			background: #FF502D;
			color: #fff;
		}
	</style>
</head>

<body>
	<div class="content app" v-cloak>
		<div class="Addr" @click="AddrChoose">
			<div class="detail" v-if="addr.id">
				<span class="name">{{addr.consignee}} {{addr.phone}}</span>
				<span class="addr">{{addr.address}}</span>
			</div>
			<div class="empty" v-else>填写收货地址</div>
		</div>

		<div class="product_box">
			<div class="product" v-for="(item,index) in products" :key="index">
				<div class="info">
					<img :src="item.image_center+'?imageView2/1/w/120/h/120'"></img>
					<div class="section s1">
						<span class="name">{{item.product_name}}</span>
						<span class="sku">{{item.skus}}</span>
					</div>
					<div class="section s2">
						<span class="price">￥{{item.product_price}}</span>
						<span class="num">x {{item.num}}</span>
					</div>
				</div>

				<div class="info2">
					<span class="name">运费</span>
					<span class="value">{{item.post_fee?item.post_fee+"元":"包邮"}}</span>
				</div>

				<div class="info2" v-if="type==2">
					<span class="name">预付款</span>
					<span class="value">￥{{item.preordain_front_money}}</span>
				</div>

				<div class="info2 money" v-if="type==2">
					<span class="name">尾款</span>
					<span class="value">￥{{item.preordain_tail_money}}</span>
					<span class="tips">{{item.tail_pay_time}} 开始支付尾款</span>
				</div>

				<div class="info2">
					<span class="name">小计</span>
					<span class="value price">￥{{item.sum}}</span>
				</div>

				<div class="coupon" @click="CouponChoose(item.id)" v-if="coupon.enable">
					<span class="name">优惠券</span>
					<span class="value">{{coupon.text||"未选择优惠券"}}</span>
				</div>

				<div class="phone" v-if="type==2">
					<span class="name">尾款通知手机号</span>
					<input class="value" type="tel" v-model="phone" value="" maxlength="11" placeholder="请输入手机号">
				</div>
			</div>
		</div>

		<div class="footer">
			<div class="price">应付金额：<span>￥{{pay}}</span></div>
			<div class="btn" @click="Pay">去付款</div>
		</div>

	</div>

</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	window.addEventListener("apiready", function() {
		index()
	});

	function index() {
		var vm = new Vue({
			el: ".app",
			data: {
				id: "",
				type: "",
				products: [],
				addr: {},
				coupon: {},
				phone: "",
				sum: 0,
				pay: 0
			},
			mounted: function() {
				//alert(JSON.stringify(api.pageParam.orderInfo))
				//this.orderInfo = api.pageParam.orderInfo
				var data = api.pageParam.orderInfo
				var addr = data.address || {};
				var sum = 0,
					type;
				var products = (data.pro_list || []).map(function(item) {
					// 价格
					type = item.attr_type;
					item.product_price = item.sku ? item.sku.price : item.price;
					item.sum = type == 1 ? item.product_price * item.num + item.post_fee : item.preordain_front_money * item.num;
					sum += item.sum;
					// 规格
					if (item.sku) {
						var skus = item.sku.sku_text.split(",");
						item.skus = skus.map(function(sku) {
							return sku.split("：")[1] || "";
						}).join("，");
					}
					return item;
				})

				this.type = type;
				this.addr = addr;
				this.coupon.enable = (type == 1);
				this.products = products;
				this.phone = addr.phone;
				this.sum = sum;
				this.pay = sum;

				//地址切换
				api.addEventListener({
					name: 'select_address'
				}, function(ret, err) {
					//alert(JSON.stringify(ret.value));
					vm.addr = ret.value.item
					vm.phone = ret.value.item.phone
				});

				// 选择的地址被删除
				api.addEventListener({
					name: 'delect_address'
				}, function(ret, err) {
					vm.addr = {};
					vm.phone = "";
				});

				//优惠券切换
				api.addEventListener({
					name: 'evt_CouponChoose'
				}, function(ret, err) {
					vm.coupon.id = ret.value.data.coupon_no;
					vm.coupon.val = ret.value.data.face_amount;
					vm.coupon.text = "满" + ret.value.data.rule_money + "减" + ret.value.data.face_amount;
					vm.pay = vm.sum - ret.value.data.face_amount;
				});

				//优惠券清除
				api.addEventListener({
					name: 'evt_CouponClear'
				}, function(ret, err) {
					vm.coupon.id = "";
					vm.coupon.val = "";
					vm.coupon.text = "";
					vm.pay = vm.sum;
				});

			},
			methods: {

				//地址选择
				AddrChoose: function() {
					my_address(true)
				},

				//优惠券选择
				CouponChoose: function(id) {
					// var ids = vm.products.map(function(item) {
					// 	return item.id
					// });
					available_coupon(id)
				},


				//下单支付
				Pay: function() {

					// 地址不能为空
					if (!vm.addr.id) {
						hhPanel.msg('请选择 地址')
						return;
					}

					// 预售商品的尾款通知手机号
					if (vm.type == 2 && vm.phone == "") {
						hhPanel.msg('尾款通知手机号 不能为空')
						return;
					}
					if (vm.type == 2 && !vm.isPhone(vm.phone)) {
						hhPanel.msg('尾款通知手机号 无效')
						return;
					}

					// 下单支付
					// if (vm.id == "") {
						AjaxSafe({
							url: "/xapp/order/buy/add",
							data: {
								products: vm.products,
								addr_id: vm.addr.id,
								coupon_id: vm.coupon.id || "",
								tail_notice_phone: vm.phone
							},
							success: function(ret) {
								//alert(JSON.stringify(ret.data))
								if (ret.state) {
									vm.id = ret.data
									hhWeixin.pay({
										tradeNo: ret.data.trade_no,
										detail: ret.data.detail,
										description: ret.data.description,
										totalFee: ret.data.total_fee,
										notifyUrl: ret.data.notify_url
									}, function() {
                    order_pay_success(ret.data.trade_no)
									});
									api.sendEvent({name: 'evt_CartChange'});
									api.sendEvent({name: 'evt_CartPay'});
								} else
									hhPanel.msg(ret.msg)
							}
						});
					// }
				},

				//手机号校验
				isPhone: function(str) {
					var reg = /^1([38]\d|4[57]|5[012356789]|66|7[0135678]|9[89])\d{8}$/;
					return reg.test(str);
				},

			},

		});
	}
</script>

</html>
